<template>
  <div :class="className" :style="{height:height,width:width}"></div>

</template>

<script>
import * as echarts from 'echarts';

require('echarts/theme/macarons') // echarts theme

import resize from "./mixins/resize";

export default {
  mixins: [resize],
  name: "DynamicBarChart",
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    backgroundColor: {
      type: String,
      default:'#375A88'
    }
  },
  data() {
    return {
      chart: null,
      timer:null,
      data:[100,70,30,120,60]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    this.timer = setInterval(() => {
      this.getItemList();
    }, 3000)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    clearInterval(this.timer);
  },
  methods: {
    getItemList(){
      const dataArrary = this.data;
      dataArrary.forEach((item, index) =>{
          return dataArrary[index] = item + Math.round(Math.random() * 200);
      })
      this.data = dataArrary;
      this.initChart();
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'dark')
      this.options.series.data = this.data
      this.chart.setOption(this.options)

    }
  },
  computed:{
    options (){
      return {
        backgroundColor:this.backgroundColor,
        xAxis: {
          max: 'dataMax'
        },
        yAxis: {
          type: 'category',
          data: ['计划入堆', '准备入堆', '完成入堆','准备出堆', '已出堆'],
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 2 // only the largest 3 bars will be displayed
        },
        series: [
          {
            realtimeSort: true,
            name: '辐照实验全年计划',
            type: 'bar',
            data: this.data,
            label: {
              show: true,
              position: 'right',
              valueAnimation: true
            }
          }
        ],
        legend: {
          show: true
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      }
    },

  }
}
</script>

<style scoped>

</style>
